<html>
<head>
	<title>CapsLock Demo</title>
	<link rel="stylesheet" href="capslock.css" type="text/css" media="screen" />
	<style type="text/css">
		form
		{
			width: 500px;
			margin: 0 auto;
		}
		.label
		{
			width: 60px;
		}
		.field
		{
			width: 260px;
		}
		.notice
		{
			display: none;
			line-height: 2em;
			margin-top: .5em;
			padding: 0;
		}
	</style>
</head>
<body>
	<form>
	<fieldset>
		<legend>Login</legend>
		<p>
			Test out the caps lock notifiers by typing in some data with the caps lock on or
			off. The caps lock state should be preserved across focus changes and should change
			when you hit the caps lock key unlike other caps lock checkers out there.</p>
		<table>
			<tbody>
				<tr>
					<td class="label">
						<label for="username">
							Username:</label>
					</td>
					<td class="field">
						<input type="text" id="username" name="username" class="title" />
					</td>
					<td>
						<span id="usercapsnotice" class="notice">Caps On.</span>
					</td>
				</tr>
				<tr>
					<td class="label">
						<label for="password">
							Password:</label>
					</td>
					<td class="field">
						<input type="password" id="password" name="password" class="title" />
					</td>
					<td>
						<span id="passcapsnotice" class="notice">Caps On.</span>
					</td>
				</tr>
			</tbody>
		</table>
	</fieldset>
	</form>
	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/'; </script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/base/element/capslock.js"></script>
</body>
</html>
